  <template>
    <div class="login-box">
      <div class="box">
        <div class="content">
          <div class="register">
            <div>
              <p class="title">手机号码</p>
              <div class="input-box">
                <input class="input getY" placeholder="请输入手机号码" v-model="username" type="text">
                <div style="color:#BE2328;" @click="status==0||status==2?getY():false">{{status==0?'获取验证码':status==1?time+'后重发':'重新获取'}}</div>
              </div>
            </div>
            <div>
              <p class="title">验证码</p>
              <input class="input" placeholder="请输入验证码" v-model="yanzheng" type="text">
            </div>
            <div>
              <p class="title">密码</p>
              <input class="input" placeholder="请输入密码" v-model="password" type="password">
            </div>
          </div>
          <div class="bottom">
            <p class="hui" style="text-align:center;margin:.72rem 0 .24rem;font-size:.28rem">登陆或注册表示您同意<a class="art" href="">《阿特多多用户协议》</a></p>
            <button @click="submit()">提交</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import md5 from 'js-md5'
  export default {
      name: '',
      data() {
          return {
              username: '',
              password: '',
              yanzheng: '',
              text: '',
              time:60,
              status:0,
              getYanzheng:''
          }
      },
      methods: {
          // 校验的方法 手机号 密码 验证码
          verify(username, password, yanzheng) {
              if (username) {
                  var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
                  if (!myreg.test(this.username)) {
                      this.text = '请输入正确的手机号'
                      this.$toast({
                          message: this.text,
                          duration: 3000
                      })
                      return false
                  }
              }
              if (password) {
                  var myreg = /^[a-zA-Z][a-zA-Z0-9]{6,15}$/
                  if (!myreg.test(this.password)) {
                      this.text = '密码必须为字母开头不含特殊字符大于7位'
                      this.$toast({
                          message: this.text,
                          duration: 3000
                      })
                      return false
                  }
              }
              if (yanzheng) {
                  var myreg = /^[0-9]{6}$/
                  if (!myreg.test(this.yanzheng) || this.yanzheng !== this.getYanzheng) {
                      this.text = '请输入正确的6位验证码'
                      this.$toast({
                          message: this.text,
                          duration: 3000
                      })
                      return false
                  }
              }
              return true
          },
          // 绑定
          submit() {
              // 校验手机号 密码 验证码
              if (!this.verify(true, true,true)) {
                  return false
              }
              // 请求
              this.Apost(
                  {
                      api_name: 'ateduoduo.user.login',
                      mobile: this.username,
                      password: md5(this.password)
                  },
                  (err, res) => {
                      if (err) return false
                      this.$toast({
                          message: '登陆成功',
                          duration: 1500
                      })
                      this.$router.push('/s')
                  }
              )
          },
          // 获取验证码
          getY() {
            // 校验手机号
              if (!this.verify(true)) {
                return false
              }
              this.Apost({mobile:this.username,api_name:'ateduoduo.user.sendVerifyCode'},(err,res)=>{
                //  拿到验证码,开始重新发送的倒计时
                if(!err){
                  this.status = 1
                  this.timeGo()
                  this.getYanzheng = res.data
                }
              })
          },
          timeGo(clear){
            var that = this
            var timeGo = setInterval(function(){
              that.time-=1
              if(that.time == 0){
                that.status = 2
                clearInterval(timeGo)
                that.time = 60
              }
            },1000)
          }
      },
      watch: {

      },
      beforeDestroy (){

      }
  }
  </script>
  <style scoped>
  .login-box {
      padding-top: 1.32rem;
  }
  .box {
      width: 6.54rem;
      /* margin-top: 1.32rem; */
      margin: 0 auto;
      border-radius: 4px;
      height: 8.52rem;
  }
  .tabs-items {
      width: 1.28rem;
      font-size: 0.36rem;
      height: 100%;
      padding-top: 0.72rem;
      text-align: center;
  }
  .tabs-active {
      color: rgba(190, 35, 40, 1);
      border-bottom: solid 4px rgba(190, 35, 40, 1);
  }
  .content {
      padding: 0.24rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100% - 1.4rem);
  }
  .content .title {
      padding: 0.24rem 0;
  }
  .content .input {
      border: none;
      border-bottom: solid 1px rgba(216, 216, 216, 1);
      width: 100%;
      font-size: 0.32rem;
      padding: 0 0.06rem 0.24rem;
  }
  .content .bottom button {
      width: 100%;
      border: none;
      height: 0.96rem;
      background: none;
      background: rgba(51, 51, 51, 1);
      text-align: center;
      line-height: 0.96rem;
      color: #fff;
      font-size: 0.32rem;
      border-radius: 4px;
  }
  .forget {
      text-align: right;
      margin-bottom: 0.24rem;
  }
  .forget a {
      color: rgba(0, 0, 0, 0.54);
      text-decoration: none;
  }
  .art {
      color: #be2328;
  }
  .sanfang {
      margin-top: 0.8rem;
      text-align: center;
  }
  .sanffang-img {
      margin-top: 0.3rem;
  }
  .getY {
      border: none !important;
      width: calc(100% - 1.6rem) !important;
  }
  .input-box {
      border-bottom: solid 1px rgba(216, 216, 216, 1);
      display: flex;
      justify-content: space-between;
      /* align-items: center; */
      margin-bottom: 0.24rem;
  }
  </style>
